<template>
  <div>
    <el-row>
      <el-col :span="24" class="addRole">
        <!-- 查询 -->
        <el-popover placement="bottom-start" width="1000" style="margin-right:10px;" trigger="click">
          <el-form :inline="true" :model="search">
              <el-form-item label="客户名称" >
                  <el-input v-model="search.name"></el-input>
              </el-form-item>
              <el-button type="primary" @click="searchBtn">确认</el-button>
          </el-form>
          <el-button slot="reference" type="primary" icon="el-icon-search">查询</el-button>
        </el-popover>
        <el-button type="primary" @click="showDialog('insert')">新增</el-button>
      </el-col>
    </el-row>
    <!-- 29所列表 -->
    <el-table :data="tableList" stripe border class="user-table" :height="tableHeight" style="width: 100%;" v-loading="loading">
      <el-table-column fixed type="index" label="序号" sortable min-width="30"></el-table-column>
      <el-table-column prop="name" label="客户信息" sortable min-width="100"></el-table-column>
      <el-table-column prop="code" label="客户编码" sortable min-width="100"></el-table-column>
      <el-table-column prop="linkPerson" label="联系人" sortable width="90" > </el-table-column>
      <el-table-column prop="phone" label="联系电话" sortable width="110"></el-table-column>
      <el-table-column prop="fax" label="传真" sortable width="100"></el-table-column>
      <el-table-column prop="email" label="邮箱" sortable width="150"></el-table-column>
      <el-table-column prop="bank" label="开户行" sortable min-width="120"></el-table-column>
      <el-table-column prop="account" label="开户账号"  width="100"  align="center"></el-table-column>
      <el-table-column prop="taxNums" label="税号" sortable min-width="120"></el-table-column>
      <el-table-column prop="address" label="地址" sortable width="150"></el-table-column>
      <el-table-column prop="creatorName" label="创建者" sortable width="100"></el-table-column>
      <el-table-column prop="createTime" label="创建时间" sortable min-width="120"></el-table-column>
      <el-table-column fixed="right" label="操作" align="right" width="60">
        <template slot-scope="scope">
         <el-button @click="showDialog('update',scope.row)" type="text" size="small">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pagination.currentPage" :page-sizes="[10, 15,20, 25,30,50, 100]" :page-size="pagination.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"></el-pagination>
    <el-dialog class="bodyNopaddingTop" :title="dialog.title" :visible.sync="dialog.isShow" :close-on-click-modal="false"  v-dialogDrag>
      <el-form :model="dialog"   ref="ruleForm3" label-width="180px" class="demo-ruleForm" :inline="true">
        <el-form-item label="客户信息" prop="name">
          <el-input v-model="dialog.formData.name" class="width220"></el-input>
        </el-form-item>
        <el-form-item label="客户编码" prop="code" >
          <el-input v-model="dialog.formData.code" class="width220"></el-input>
        </el-form-item>
         <el-form-item label="联系人" prop="linkPerson">
          <el-input v-model="dialog.formData.linkPerson" class="width220"></el-input>
        </el-form-item>
        <el-form-item label="联系电话" prop="phone">
          <el-input v-model="dialog.formData.phone" class="width220"></el-input>
        </el-form-item>
         <el-form-item label="传真" prop="fax" >
          <el-input v-model="dialog.formData.fax" class="width220"></el-input>
        </el-form-item>
         <el-form-item label="邮箱" prop="email">
          <el-input v-model="dialog.formData.email" class="width220" ></el-input>
        </el-form-item>
        <el-form-item label="开户行" prop="bank">
          <el-input v-model="dialog.formData.bank" class="width220"></el-input>
        </el-form-item>
        <el-form-item label="开户账号" prop="account">
          <el-input v-model="dialog.formData.account" class="width220"></el-input>
        </el-form-item>
        <el-form-item label="税号" prop="taxNums">
          <el-input v-model="dialog.formData.taxNums" class="width220" ></el-input>
        </el-form-item>
        <el-form-item label="地址" prop="address">
          <el-input v-model="dialog.formData.address" class="width220" ></el-input>
        </el-form-item>
        <el-form-item label="创建者" prop="creatorName"  v-if="dialog.type==='update'">
          <el-input v-model="dialog.formData.creatorName" class="width220" disabled></el-input>
        </el-form-item>
        <el-form-item label="创建时间" prop="createTime"  v-if="dialog.type==='update'">
          <el-input v-model="dialog.formData.createTime" class="width220" disabled></el-input>
        </el-form-item>
        <el-form-item  class="form-item-block text-center">
          <el-button type="primary" @click="onSubmit()">确认</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import salesApi from 'plugins/axios/salesApi.js';
import baseApi from 'plugins/axios/baseApi.js';
export default {
  components: {
  },
  data(){
    return {
      search:{
        name:''
      },
      loading:false,
      tableList:[],
      pagination:{/**分页参数 */
        currentPage:1,
        pageSize:10,
        total:0
      },
      dialog:{
        type:'',
        isShow:false,
        title:'',
        formData:{}
      }
    }
  },
  created(){},
  mounted(){
    this.getTablList();
  },
  computed:{
    tableHeight(){
      return this.$store.state.clientHeight-184;
    }
  },
  methods:{
    /**29所计划列表 */
    getTablList(){
      let self = this;
      let postData = {
        currentPage:self.pagination.currentPage,
        pageSize:self.pagination.pageSize,
        name:self.search.name
      }
      self.loading = true;
      salesApi.customerInfoList(postData).then(res=>{
       self.loading = false;
        self.tableList= res.content.records;
        self.pagination.total =res.content.total;
      },error=>{
        self.loading = false;
      })
    },
    searchBtn(){
      this.getTablList()
    },
    handleSizeChange(size){/**切换分页条数 */
      this.pagination.pageSize=size;
      this.pagination.currentPage=1;
      this.getTablList();
    },
    handleCurrentChange(current){/**切换分页页数 */
      this.pagination.currentPage=current;
      this.getTablList();
    },
    showDialog(type,row){
      let self  = this;
      self.dialog.isShow = true;
      self.dialog.type= type;
      switch(type){
        case 'insert':
          self.dialog.title = '新增客户信息'
          self.dialog.formData = {}
          break;
        case 'update':
          self.dialog.title = '修改客户信息'
          self.dialog.formData = JSON.parse(JSON.stringify(row));
          break;
      }
    },
    onSubmit(){
      let self = this;
      salesApi.insertUpdateCustomerInfo(self.dialog.type, self.dialog.formData).then(res=>{
        self.$message.success(`${self.dialog.title}成功`);
        self.dialog.isShow = false;
        self.getTablList();
      })
    }
  }
}
</script>
<style lang="stylus" scoped>
  .addRole
    padding-bottom 10px
</style>